<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猫头鹰-登录</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <style>
        * {
            /*初始化*/
            margin: 0;
            padding: 0;
        }
        
        body {
            /* 100%窗口高度 */
            height: 100vh;
            /* 弹性布局，居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 渐变背景 */
            background: linear-gradient(200deg, #72afd3, #157e44);
        }
        
        .login-box {
            /* 相对定位 */
            position: relative;
            width: 320px;
        }
        
        .input-box {
            display: flex;
            flex-direction: column;
        }
        
        .input-box input {
            height: 40px;
            border-radius: 3px;
            /* 文字缩进15px */
            text-indent: 15px;
            /* outline绘制元素周围线的形状 */
            outline: none;
            /* 边框样式 */
            border: none;
            margin-bottom: 15px;
        }
        
        .input-box input:focus {
            outline: 1px solid lightseagreen;
        }
        
        .input-box button {
            border: none;
            height: 45px;
            background-color: lightseagreen;
            color: #fff;
            border-radius: 3px;
            cursor: pointer;
        }
        /* 接下来是猫头鹰的样式 */
        
        .owl {
            width: 211px;
            height: 108px;
            /* 背景图片猫头鹰的头 */
            background: url("owl-login.png") no-repeat;
            position: absolute;
            top: -100px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .owl .hand {
            /* 自己画两个圆充当猫头鹰的手 */
            width: 34px;
            height: 34px;
            border-radius: 40px;
            background-color: #472d20;
            position: absolute;
            left: 12px;
            bottom: -8px;
            /* 沿着y轴缩放0.6倍（压扁） */
            transform: scaleY(0.6);
            /* ease-out:规定以慢速结束的过渡效果,完成该动画需要0.3s */
            transition: 0.3s ease-out;
        }
        
        .owl .hand.hand-r {
            left: 170px;
        }
        /* 定义密码焦点触发时猫头鹰手的样式 */
        
        .owl.password .hand {
            transform: translateX(42px) translateY(-15px) scale(0.7);
        }
        
        .owl.password .hand.hand-r {
            transform: translateX(-42px) translateY(-15px) scale(0.7);
        }
        
        .owl .arms {
            position: absolute;
            top: 58px;
            width: 100%;
            height: 41px;
            overflow: hidden;
        }
        /* 猫头鹰的手臂(翅膀) */
        
        .owl .arms .arm {
            width: 40px;
            height: 65px;
            position: absolute;
            left: 20px;
            top: 40px;
            background: url("owl-login-arm.png") no-repeat;
            transform: rotate(-20deg);
            transition: 0.3s ease-out;
        }
        
        .owl .arms .arm.arm-r {
            transform: rotate(20deg) scaleX(-1);
            left: 158px;
        }
        /* 定义密码焦点触发时猫头鹰手臂(翅膀)的样式 */
        
        .owl.password .arms .arm {
            transform: translateY(-40px) translateX(40px);
        }
        
        .owl.password .arms .arm.arm-r {
            transform: translateY(-40px) translateX(-40px) scaleX(-1);
        }
    </style>

</head>

<body>
    <div class="login-box">
        <!-- 猫头鹰 -->
        <div class="owl" id="owl">
            <!-- hand:手 -->
            <div class="hand"></div>
            <div class="hand hand-r"></div>
            <!-- 手臂 -->
            <div class="arms">
                <div class="arm"></div>
                <div class="arm arm-r"></div>
            </div>
        </div>
        <!-- 输入表单 -->
        <div class="input-box">
            <input type="text" placeholder="账号">
            <input type="password" placeholder="密码" id="password">
            <button>登录</button>
        </div>
    </div>
    <script type="text/javascript">
        $("#password").focus(function() {
            $("#owl").addClass("password");
        }).blur(function() {
            $("#owl").removeClass("password");
        })
    </script>
</body>

</html>